<template>
<div class="register">
    <div class="register_cn">
        <h1>欢迎注册</h1>
        <div class="email"><input type="text" placeholder="请输入邮箱"/></div>
        <div class="validation">
            <input placeholder="请输入验证码"/>
            <button>去邮箱验证</button>
        </div>
        <div class="name"><input type="text" placeholder="设置用户名"/></div>
        <div class="password">
            <input :type="pwdType" placeholder="设置密码，6-20位长度" />
            <img :src="openeye" class="eye" alt="" @click="changeType()">
        </div>
        <div class="password1">
            <input :type="pwdType1" placeholder="确认密码" />
            <img :src="openeye1" class="eye" alt="" @click="changeType1()">
        </div>
        <div class="agreement"><input type="checkbox">我已阅读并同意《服务协议和隐私声明》</div>
        <div class="register_a"><button @click="register()">注  册</button></div>
        <div class="cont">
                已有账号，<router-link to='/login'>马上登录 <i class="el-icon-arrow-right"></i></router-link>
        </div>
    </div>
</div>
</template>
<style rel="stylesheet/scss" lang="scss" >
.register{
    margin-top: 88px;
    position: relative;
    text-align: center;
    h1{
        text-align: center;
        color: #5963a1;
        font-size: 30px;
        margin-bottom: 40px;
    }
    .register_cn{
        display: inline-block;
        background-color: #ffffff;
        box-shadow: 0px 3px 41px 9px 
            rgba(0, 0, 0, 0.26);
        border-radius: 3px;
        padding: 80px 100px;
        input{
            height: 47px;
            background-color: #ffffff;
            border-radius: 4px;
            border: solid 1px #cfd4d7;
            line-height: 47px;
            margin-top: 20px;
            width: 100%;
            padding: 10px 18px;
            width: 340px;
        }
        .validation{
            input{
                width: 220px;
                float: left;
            }
            button{
                width: calc(100% - 200px);
                width: -webkit-calc(100% - 200px);
                float:right;
                height: 47px;
                background-color: #5963a1;
                border-radius: 4px;
                border: solid 1px #cfd4d7;
                color: #fff;
                width: 110px;
                margin-top: 20px;
                cursor: pointer;
            }
        }
        .agreement {
            color: #5963a1;
            font-size: 14px;
            text-align: left;
            input{
                 width: 12px;
                height: 12px;
                line-height: 12px;
                background-color: #ced4d7;
                border-radius: 2px;
                border: none;
                position: relative;
                top: 1px;
                margin-right: 5px;
                margin-top: 10px;
            }
        }
        .register_a {
            button{
                 width: 100%;
                background-color: #5963a1;
                height: 47px;
                border-radius: 4px;
                line-height: 47px;
                color:#fff;
                text-align: center;
                margin-top: 20px;
                border: none;
                font-size: 16px;
            }
        }
        .cont{
            margin-top: 18px;
            text-align: center;
            font-size: 13px;
            a{
                display:inline-block;
                color: #5963a1;
                i{
                    font-size: 12px;
                }
            }
        }
        .password,.password1{
            position: relative;
            img{
                position: absolute;
                right: 10px;
                z-index: 2;
                cursor: pointer;
                top: 38px;
            }
        }
    }
    
}
</style>

<script>

import $ from 'jquery'
export default {
    name : 'register',
    data(){
        return{
            openeye: require('@/assets/images/yan.jpg'),
            openeye1: require('@/assets/images/yan.jpg'),
            pwdType: 'password',
            pwdType1: 'password'
        }
    },
    created(){
        
    },
    methods:{
        changeType() {
            this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
            this.openeye = this.openeye == require("@/assets/images/yan.jpg") ? require("@/assets/images/yan1.jpg") : require("@/assets/images/yan.jpg");
        },
        changeType1() {
            this.pwdType1 = this.pwdType1 === 'password' ? 'text' : 'password';
            this.openeye1 = this.openeye1 == require("@/assets/images/yan.jpg") ? require("@/assets/images/yan1.jpg") : require("@/assets/images/yan.jpg");
        },
        register(){

        }
    }
}
</script>